<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
	<title>VForm Designer Demo</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.7/theme-chalk/index.min.css">
	<link rel="stylesheet" href="../dist/designer.style.css?t=20210730"> <!-- 根据Web服务器或CDN路径修改 -->
	
</head>
<body>
  <div id="app">
    <v-form-designer ref="vfDesigner" :field-list-api="fieldListApi" :banned-widgets="testBanned"
                   :designer-config="designerConfig">
      <!-- 自定义按钮插槽演示 -->
      <template #customToolButtons>
        <el-button type="default" @click="saveFormJson">保存</el-button>
      </template>
    </v-form-designer>

  </div>

<script crossorigin="anonymous" integrity="sha512-9l+B+sZNtrdrhFWM0UGiKsRwZctEAfW7h8Z4Ycd3tQyvis8tZCpNkxTxJ3XcCRP54VD9YQs+4PeMVi5ctdlbcw==" src="https://lib.baomitu.com/vue/3.2.30/vue.global.min.js"></script>
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-plus/2.0.4/index.full.min.js"></script>
<script src="../dist/designer.umd.js?t=20220202"></script> <!-- 根据Web服务器或CDN路径修改 -->


<script setup>
  const { ref, reactive } =Vue;
  const { ElMessage } = ElementPlus;

  const vfDesigner = ref(null)
  const fieldListApi = reactive({
    URL: 'https://www.fastmock.site/mock/2de212e0dc4b8e0885fea44ab9f2e1d0/vform/listField',
    labelKey: 'fieldLabel',
    nameKey: 'fieldName'
  })
  const testBanned = ref([
    //'sub-form',
    //'alert',
  ])
  const designerConfig = reactive({
    languageMenu: true,
    //externalLink: false,
    //formTemplates: false,
    //eventCollapse: false,
    //clearDesignerButton: false,
    //previewFormButton: false,

    //presetCssCode: '.abc { font-size: 16px; }',
	toolbarMaxWidth: 470,
  })

  const saveFormJson = () => {
    let formJson = vfDesigner.value.getFormJson()
    //TODO: 将formJson提交给后端保存接口，需自行实现！！
    ElMessage.success('表单已保存！')
  }
  
  const app = createApp(App)
app.use(ElementPlus)  //全局注册element-plus
app.use(vfDesigner)  //全局注册VForm3(同时注册了v-form-designe、v-form-render等组件)
app.mount('#app')
</script>

<style lang="scss">
  #app {
    height: 100%;
  }
</style>
